import React, { useState, useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-trackplayer';
import initBaiduMap from './hooks/useMap'; // 假设 useMap 是一个包含 initBaiduMap 和 initGaodeMap 的文件
import data from '../../public/data.json';

const MapComponent = () => {
    const [sliderProgress, setSliderProgress] = useState(0);
    const [selectSpeed, setSelectSpeed] = useState(1);
    const mapRef = useRef(null);
    const trackRef = useRef(null);

    // 模拟一段轨迹数据
    const path = data.listCheck;

    useEffect(() => {
        const map = initBaiduMap(mapRef.current);

        const popup = L.popup({
            autoClose: false,
            offset: L.point(0, -30),
            closeButton: false,
        });

        const markerIcon = L.icon({
            iconSize: [27, 54],
            iconUrl: require('./assets/images/walk.gif'), // 确保路径正确
            iconAnchor: [13.5, 27],
        });

        const track = new L.TrackPlayer(
            path,
            {
                markerIcon,
                panTo: true,
                markerRotation: false,
            },
            {
                speed: 1000 * selectSpeed, // 初始速度
            }
        ).addTo(map);

        trackRef.current = track;

        // 地图设置到合适的缩放级别
        map.setZoom(17, { animate: false });

        track.on('progress', (progress, { lng, lat }, index) => {
            popup.setLatLng([lat, lng]);
            popup.setContent(getContent(path[index]));
            popup.openOn(map);
            setSliderProgress(progress * 100);
        });

        return () => {
            map.remove(); // 清理地图
        };
    }, []);

    const formatTooltip = (val) => val.toFixed(2);

    const getContent = (dataItem) => {
        const dataFormat = [
            { label: '设备定位时间', field: 'gpsTime' },
            { label: '车辆状态', field: 'statusStr' },
            { label: '报警', field: 'alarm' },
        ];
        return (
            <div style={{ width: '300px' }}>
                {dataFormat.map((it) => (
                    <div key={it.label} style={{ display: 'flex', marginBottom: '5px' }}>
                        <span style={{ color: '#666666', marginRight: '10px', width: '100px', textAlign: 'left' }}>
                            {it.label}:
                        </span>
                        <span>{dataItem[it.field]}</span>
                    </div>
                ))}
            </div>
        );
    };

    const changeProgress = (val) => {
        if (trackRef.current) {
            trackRef.current.setProgress(val / 100);
            trackRef.current.setSpeed(1000 * selectSpeed); // 更新速度
        }
    };

    const changeSpeed = (val) => {
        if (trackRef.current) {
            trackRef.current.setSpeed(1000 * val);
            setSelectSpeed(val);
        }
    };

    const options = [
        { value: 0.5, label: 'X0.5' },
        { value: 1, label: 'X1' },
        { value: 2, label: 'X2' },
        { value: 3, label: 'X3' },
        { value: 5, label: 'X5' },
    ];

    return (
        <div className="h-screen flex flex-col">
            <div className="flex items-center justify-between px-4 py-2 w-full">
                <div className="flex items-center flex-1">
                    <button onClick={() => trackRef.current?.start()}>开始</button>
                    <button onClick={() => trackRef.current?.pause()}>暂停</button>
                </div>
                <div className="flex items-center">
                    <input
                        type="range"
                        min="0"
                        max="100"
                        value={sliderProgress}
                        onChange={(e) => changeProgress(Number(e.target.value))}
                        style={{ width: '300px' }}
                    />
                    <select
                        value={selectSpeed}
                        onChange={(e) => changeSpeed(Number(e.target.value))}
                        style={{ width: '80px', marginLeft: '10px' }}
                    >
                        {options.map((option) => (
                            <option key={option.value} value={option.value}>
                                {option.label}
                            </option>
                        ))}
                    </select>
                </div>
            </div>
            <div className="flex-1">
                <div ref={mapRef} id="map" style={{ height: '100%', width: '100%' }} />
            </div>
        </div>
    );
};

export default MapComponent;